<template>
  <!--  强制回收云库存 -->
  <el-dialog width="1000px" destroy-on-close append-to-body :visible.sync="show" :before-close="cancel">
    <div slot="title" style="display: flex">
      <div>强制回收云库存(慎用)</div>
      <div style="margin-left: 200px; font-size: 15px; line-height: 40px">卖家名称:{{ formData.distrName }}</div>
    </div>
    <div>
      <el-form :model="queryParams" ref="queryForm" size="small" inline>
        <el-form-item>
          <el-button plain size="mini" type="primary" @click="recycleBin">回收 </el-button>
        </el-form-item>
        <el-form-item prop="skuNo">
          <el-input :placeholder="$t('sku编号')" v-model="queryParams.skuNo" clearable @keyup.enter.native="getList" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="getList">
            {{ $t('搜索') }}
          </el-button>
        </el-form-item>
      </el-form>
      <!-- <el-row style="margin-bottom: 10px">
        <el-col>
          <el-button plain size="mini" type="primary" @click="recycleBin">回收 </el-button>
        </el-col>
      </el-row> -->
      <el-table
        height="550"
        v-loading="loading"
        ref="TableRef"
        :data="tableData"
        @select-all="selectAll"
        @select="handleSelectionChange"
      >
        <el-table-column
          show-overflow-tooltip
          type="selection"
          :selectable="() => !isSelectAll"
          width="50"
          align="center"
        />
        <el-table-column show-overflow-tooltip label="sku" align="center" prop="skuNo" />
        <el-table-column label="图片" align="center" prop="">
          <template slot-scope="{ row }">
            <el-image :src="row.imgUrl" style="width: 30px; height: 30px"></el-image>
          </template>
        </el-table-column>
        <el-table-column show-overflow-tooltip label="中文名字" align="center" prop="skuNameCn" />
        <el-table-column show-overflow-tooltip label="可回收数量" align="center" prop="recoveryNum" />
        <el-table-column
          show-overflow-tooltip
          label="可回收中已付款数量"
          width="90"
          align="center"
          prop="recoveryPaidNum"
        />
        <el-table-column show-overflow-tooltip label="已付款价值" align="center" prop="recoveryPaidAmount">
          <template #default="{ row }">
            <div>{{ row.recoveryPaidAmount | thousand }}</div>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        size="mini"
        v-show="queryParams.total > 0"
        :total="queryParams.total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        :page-sizes="[8, 10, 30, 50, 100]"
        @pagination="getList"
      />
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">关 闭</el-button>
    </div>
    <!-- 确认回收弹框 -->
    <el-dialog
      width="400px"
      title="回收信息"
      destroy-on-close
      append-to-body
      :visible.sync="AllRecover.show"
      :before-close="AllRecoverCancel"
    >
      <div class="messageContent">
        <el-row>
          <el-col :offset="2"><span class="title">卖家名称:</span> {{ formData.distrName }}</el-col>
        </el-row>
        <el-row>
          <el-col :offset="2"> <span class="title">回收sku种类:</span>{{ AllRecover.data.num }}</el-col>
        </el-row>
        <el-row>
          <el-col :offset="2"
            ><span class="title">已付款价值:</span>{{ AllRecover.data.totalRecoveryPaidAmount }}</el-col
          >
        </el-row>
        <el-row>
          <el-col :offset="2"
            ><span class="title">平台账单扣除:</span
            ><el-input type="number" @input="rulerValue" v-model="platBillSubtract" style="width: 200px"></el-input
          ></el-col>
        </el-row>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="AllRecoverSubmit" type="primary">确认回收</el-button>
      </div>
    </el-dialog>
  </el-dialog>
</template>

<script>
import { forceRecoveryList, forceRecoveryInfo, forceRecoveryHandle } from '@/api/platform/sellerManage'

export default {
  activated() {
    this.$nextTick(() => this.$refs['TableRef']?.doLayout())
  },
  props: {
    /**
     * formData
     */
    formData: {
      type: Object,
      default: {},
    },

    /**
     * 控制显示隐藏
     */
    show: {
      type: Boolean,
      required: true,
      default: false,
    },
  },
  data() {
    return {
      AllRecover: {
        show: false,
        data: {},
      },
      /**是否全选 */
      isSelectAll: false,
      queryParams: {
        total: 0,
        pageSize: 8,
        pageNum: 1,
      },
      form: {},
      loading: false,
      tableData: [],
      tableCheckAll: [],
      tableCheck: [],
      platBillSubtract: null,
    }
  },
  computed: {},
  watch: {
    show: function (newValue) {
      if (newValue) {
        this.getList()
      }
    },
  },
  methods: {
    handleSelectionChange(rows, item) {
      console.log(rows, item)
      let isDeletes = false
      rows.forEach((Roewitem) => {
        if (JSON.stringify(Roewitem) == JSON.stringify(item)) {
          isDeletes = true
        }
      })
      /**当前选中中不存在就删除 */
      if (!isDeletes) {
        this.tableCheckAll.forEach((AllSelect, index) => {
          if (JSON.stringify(AllSelect) == JSON.stringify(item)) {
            this.tableCheckAll.splice(index, 1)
          }
        })
      }
      this.tableCheck = rows
    },
    /**限制输入框的值 */
    rulerValue() {
      console.log(
        this.platBillSubtract,
        this.AllRecover.data.totalRecoveryPaidAmount,
        this.platBillSubtract > this.AllRecover.data.totalRecoveryPaidAmount,
        this.platBillSubtract > Number(this.AllRecover.data.totalRecoveryPaidAmount),
      )
      if (this.platBillSubtract > Number(this.AllRecover.data.totalRecoveryPaidAmount)) {
        this.platBillSubtract = Number(this.AllRecover.data.totalRecoveryPaidAmount)
      }
      if (this.platBillSubtract < 0) {
        this.platBillSubtract = 0
      }
    },
    /**全部回收确认弹框 */
    AllRecoverSubmit() {
      let skuIds = []
      this.tableCheckAll.forEach((item) => skuIds.push(item.skuId))
      if (this.isSelectAll) {
        skuIds = null
      }
      forceRecoveryHandle({
        distId: this.formData.distrId,
        type: this.isSelectAll ? 2 : 1,
        skuIds,
        platBillSubtract: this.platBillSubtract,
      }).then((res) => {
        this.tableCheckAll = []
        this.$message.success('操作成功')
        this.getList()
        this.AllRecoverCancel()
      })
    },
    /**全部回收取消弹框 */
    AllRecoverCancel() {
      this.platBillSubtract = 0
      this.AllRecover.show = false
    },
    /**回收 */
    recycleBin() {
      /**记录非全选 */
      if (!this.isSelectAll) {
        this.tableCheck.forEach((inner) => {
          if (this.tableCheckAll.length > 0) {
            let flage = false
            this.tableCheckAll.forEach((item) => {
              if (item.skuId == inner.skuId) {
                flage = true
              }
            })
            if (!flage) {
              this.tableCheckAll.push(inner)
            }
          }
        })
        if (this.tableCheckAll.length == 0) {
          this.tableCheckAll = JSON.parse(JSON.stringify(this.tableCheck))
        }
        this.tableCheck = []
      }

      if (this.tableCheckAll.length > 0 || this.isSelectAll) {
        this.AllRecover.show = true
      } else {
        this.$message.error('请选择回收的sku')
        return
      }
      let skuIds = []
      this.tableCheckAll.forEach((item) => skuIds.push(item.skuId))
      if (this.isSelectAll) {
        skuIds = null
      }
      /**获取回收信息 */
      forceRecoveryInfo({ distId: this.formData.distrId, type: this.isSelectAll ? 2 : 1, skuIds }).then((res) => {
        this.AllRecover.data = res.data
      })
    },
    /**点击全选 */
    selectAll() {
      this.isSelectAll = !this.isSelectAll
      if (!this.isSelectAll) {
        this.getList()
      }
    },
    /**获取强制回收表格 */
    getList() {
      /**记录非全选 */
      if (!this.isSelectAll) {
        this.tableCheck.forEach((inner) => {
          if (this.tableCheckAll.length > 0) {
            let flage = false
            this.tableCheckAll.forEach((item) => {
              if (item.skuId == inner.skuId) {
                flage = true
              }
            })
            if (!flage) {
              this.tableCheckAll.push(inner)
            }
          }
        })
        if (this.tableCheckAll.length == 0) {
          this.tableCheckAll = JSON.parse(JSON.stringify(this.tableCheck))
        }
        this.tableCheck = []
      }
      this.loading = true
      forceRecoveryList({
        ...this.queryParams,
        distrId: this.formData.distrId,
      }).then((res) => {
        this.tableData = res.rows
        this.queryParams.total = res.total
        this.loading = false
        /**全选 */
        if (this.isSelectAll) {
          this.$nextTick(() => {
            this.tableData.forEach((item) => {
              this.$refs.TableRef.toggleRowSelection(item)
            })
          })
        } else {
          this.$nextTick(() => {
            this.tableCheckAll.forEach((row) => {
              this.tableData.forEach((item) => {
                if (item.skuId == row.skuId) {
                  this.$refs.TableRef.toggleRowSelection(item)
                }
              })
            })
          })
        }
      })
    },
    handleSubmit() {},

    cancel() {
      this.$emit('update:show', false)
    },
  },
}
</script>
<style scoped lang="scss">
.messageContent {
  & > .el-row {
    margin-bottom: 20px;
  }
  .title {
    // display: inline-block;
    // width: 100px;
    font-weight: bold;
    color: black;
    margin-right: 10px;
  }
}
</style>
